<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import HeaderBanner from './modules/header-banner.vue';
import CardData from './modules/card-data.vue';
import InfoPanel from './modules/info-panel.vue';

const appStore = useAppStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <div class="client-home-container">
 
    <InfoPanel :gap="gap" />
  </div>
</template>

<style scoped>
.client-home-container {
  padding: 16px;
}

.welcome-card {
  background-color: #f0f5ff;
  border: none;
}

.welcome-content {
  padding: 20px;
}

.welcome-title {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: bold;
}

.welcome-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stats-card {
  height: 100%;
}

.stats-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
}

.stats-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 8px;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
}

.stats-unit {
  font-size: 14px;
  margin-left: 4px;
  font-weight: normal;
}
</style> 